<template>
  <d2-container>
    <template slot="header"></template>
    <el-row style="margin: 20px">
      <el-button type="primary" @click="dialogFormVisible = true"
        >新建参数</el-button
      >
    </el-row>
    <template>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ 'font-size': '17px' }"
        style="width: 100%; font-size: 17px; margin-left: 15px"
      >
        <el-table-column prop="id" label="序号" align="center" fixed width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          fixed
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="admin" label="管理员" align="center" width="180">
        </el-table-column>
        <el-table-column
          prop="varType"
          align="center"
          width="180"
          label="变量类型"
        >
        </el-table-column>
        <el-table-column
          prop="initValue"
          align="center"
          width="180"
          label="初始值"
        >
        </el-table-column>
        <el-table-column
          prop="currentValue"
          width="600"
          align="center"
          label="当前值"
        >
        </el-table-column>
        <el-table-column
          prop="preValue"
          align="center"
          width="180"
          label="历史值"
        >
        </el-table-column>
        <el-table-column
          prop="app.name"
          align="center"
          width="180"
          label="所属科研项目"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          width="180"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button @click="editVar(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="delVar(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 翻页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="change"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
      >
      </el-pagination>
    </div>

    <el-dialog title="算法参数" :visible.sync="dialogFormVisible" width="35%">
      <el-form :model="form" style="width: 90%">
        <el-form-item label="参数名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数类型" :label-width="formLabelWidth">
          <el-select v-model="form.varType" placeholder="请选择变量类型">
            <el-option label="指标" value="Indicator"></el-option>
            <el-option label="累加器" value="Accumulator"></el-option>
            <el-option label="队列" value="Queue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型" :label-width="formLabelWidth">
          <el-select
            v-model="form.paramType"
            filterable
            placeholder="请选择数据类型"
          >
            <el-option label="INT" value="INT"></el-option>
            <el-option label="FLOAT" value="FLOAT"></el-option>
            <el-option label="STRING" value="STRING"></el-option>
            <el-option label="BOOLEAN" value="BOOLEAN"></el-option>
            <el-option label="ARRAY" value="ARRAY"></el-option>
            <el-option label="MAP" value="MAP"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定Task" :label-width="formLabelWidth">
          <el-select
            v-model="bindTaskName"
            filterable
            placeholder="请选择Task"
            @change="getJobs"
          >
            <el-option
              v-for="(item, index) in workflows"
              :key="index"
              :label="item.taskName"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定Job" :label-width="formLabelWidth">
          <el-select
            v-model="form.bindJobName"
            filterable
            placeholder="请选择Job"
            @change="getParams"
          >
            <el-option
              v-for="item in jobs"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定Param" :label-width="formLabelWidth">
          <el-select
            v-model="form.bindParam"
            filterable
            placeholder="请选择OutPut Params"
          >
            <el-option
              v-for="item in params"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="初始值" :label-width="formLabelWidth">
          <el-input v-model="form.initValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="当前值" :label-width="formLabelWidth">
          <el-input v-model="form.currentValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.varDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVar()">确 定</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
import {
  listVariables,
  addVariable,
  editVariable,
  delVariable,
} from "@/api/task.var.js";

import {
  getTaskNames,
  getTaskJobNames,
  getTaskJobOutputs,
} from "@/api/task.workflow.js";
import { publicMethod } from "@/api/util.js";

export default {
  inject: ["reload"],
  methods: {
    // 获取变量列表
    async listVariables(pagesize, index) {
      const res = await listVariables(index, pagesize);
      this.tableData = res.data;
    },
    editVar(row) {
      this.form = row;
      this.dialogFormVisible = true;
      console.log(row);
    },
    delVar(row) {
      console.log("点击删除", row);
      delVariable(row.id).then((res) => {
        console.log("点击删除后", res);
      });
      this.reload();
    },
    addVar() {
      console.log("点击新增或者修改", this.form);
      this.dialogFormVisible = false;
      if (this.form.id) {
        // console.log("修改的from",this.form);
        // console.log("这是修改的id",this.form.id);
        // console.log('edit')
        editVariable(this.form).then((res) => {
          console.log("调用修改后", res);
          if (res.status == 200) {
            this.open3();
            // this.listVariables(this.pageSize,this.currentPage)
          }
        });
      } else {
        console.log("保存传过来的值", this.form);

        addVariable(this.form).then((res) => {
          if (res.status == 200) {
            this.open2();
            // this.listVariables(this.pageSize,this.currentPage)
          }
        });
      }
      this.form = {};
      this.reload();
      setTimeout(() => {
        this.listVariables(this.pageSize, this.currentPage);
        this.reload();
      }, 1000);
    },
    // 添加成功后的提示
    open2() {
      this.$message({
        message: "添加成功",
        type: "success",
      });
    },
    open3() {
      this.$message({
        message: "修改成功",
        type: "success",
      });
    },
    // // 添加失败后的提示
    //  open3() {
    //   this.$message({
    //     message: '添加错误',
    //     type: 'warning'
    //   });
    // },
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date === undefined) {
        return "";
      }
      return publicMethod.getTimestamp(date);
    },
    // 每页几条
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      let index = this.currentPage;
      this.listVariables(val, index);
    },
    // 页数
    change(val) {
      this.currentPage = val;
      let pageSize = this.pageSize;
      this.listVariables(pageSize, val);
    },
    getJobs(taskName) {
      this.taskName = taskName.taskName;
      this.form.projectName = taskName.projectName;
      this.form.bindTaskName = taskName.taskName;
      // console.log("获取jobss",taskName.taskName);
      // console.log("获取jobs",taskName);
      getTaskJobNames(taskName.taskName).then((res) => {
        console.log("获取job", res);
        this.jobs = res.data;
      });
    },
    // getJobs (taskName) {
    //   this.taskName = taskName
    //   console.log("获取jobs",taskName);
    //   getTaskJobNames(taskName).then(res => {
    //     console.log("获取job",res);
    //     this.jobs = res.data.data
    //   })
    // },
    getParams(jobName) {
      getTaskJobOutputs(this.taskName, jobName).then((res) => {
        console.log("获取jobOutputs", res);
        this.params = res.data.data;
      });
    },
  },
  mounted() {
    this.listVariables(this.pageSize, this.currentPage);
    // 暂时获取总条数
    listVariables().then((res) => {
      this.total = res.data.length;
    });

    getTaskNames().then((res) => {
      console.log("获取Taskname", res.data);
      this.workflows = res.data;
      // this.from. = res.data.data.
    });
  },
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "var1",
          admin: "admin",
          varType: "Accumulator",
          initValue: "0",
          currentValue: "1",
          preValue: "0",
          app: {
            name: "燃烧数据清理",
          },
          createTime: "2021-04-19 12:20:00",
        },
        {
          id: 2,
          name: "var2",
          admin: "admin",
          varType: "Accumulator",
          initValue: "0",
          currentValue: "1",
          preValue: "0",
          app: {
            name: "燃烧数据清理",
          },
          createTime: "2021-04-19 12:20:00",
        },
        {
          id: 3,
          name: "var3",
          admin: "admin",
          varType: "Accumulator",
          initValue: "0",
          currentValue: "1",
          preValue: "0",
          app: {
            name: "燃烧数据清理",
          },
          createTime: "2021-04-19 12:20:00",
        },
        {
          id: 4,
          name: "var4",
          admin: "admin",
          varType: "Accumulator",
          initValue: "0",
          currentValue: "1",
          preValue: "0",
          app: {
            name: "燃烧数据清理",
          },
          createTime: "2021-04-19 12:20:00",
        },
      ],
      total: "",
      currentPage: 1,
      pageSize: 10,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {},
      workflows: [],
      jobs: [],
      params: [],
      taskName: "",
      bindTaskName: "",
      projectName: "",
    };
  },
};
</script>
<style lang="scss" scoped>
.block {
  margin: 10px 0px 0px 35px;
}
</style>
